(() => {
    new Vue({
        el: '#line1',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            Index: 0,//所选专业的下标
            course_nameArr: [],
            courseAvgScoreArr: [],  
            Array:[]
        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.getIndex()
            this.altIndex()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getCourseAvg/getDashujuCourse'),                       
                        axios.get('http://localhost:8001/getCourseAvg/getJisuanjiyingyongCourse'),   
                        axios.get('http://localhost:8001/getCourseAvg/getRuanjiangongchengCourse'),   
                        axios.get('http://localhost:8001/getCourseAvg/getRuanjianjishuCourse'),   
                        axios.get('http://localhost:8001/getCourseAvg/getWangluogongchengCourse'),   
                        axios.get('http://localhost:8001/getCourseAvg/getWangluojishuCourse'),   
                        axios.get('http://localhost:8001/getCourseAvg/getWulianwangCourse'),
                        axios.get('http://localhost:8001/getCourseAvg/getXinxiguanliCourse'),
                    ])
                    .then(response => (
                        this.resdata = response
                        // console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                }, 500)
            },

            //获得点击下标
            getIndex() {
                setTimeout(() => {
                    window.index = 0
                    $('.sell').change(function () {
                        index = this.selectedIndex
                        // console.log("selectedIndex/window.index:", index)
                    })

                }, 500)
            },

            //赋值Index
            altIndex() {
                setTimeout(() => {
                    $('.sell').change(() => {
                        this.Index = index
                        // console.log("赋值Index:", this.Index)
                    })
                }, 1000)
            },

            //得到index后获取相应专业的数组,使用watch监视
            getArr() {
                setTimeout(() => {
                    console.log("====getArr()被调用了====")
                    console.log(this.Data[this.Index])
                }, 600)
            },

            //分别把相应专业的stu_class取出为列表
            getcourse_name() {
                arr = []
                this.course_nameArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.course_nameArr.push(arr[i].course_name)
                    }
                }, 555)
                // console.log("this.course_nameArr:",this.course_nameArr)
            },

            //分别把相应专业的avgScore取出为列表
            getCourseAvgScore() {
                arr = []
                this.courseAvgScoreArr.length = 0
                setTimeout(() => {
                    arr = this.Data[this.Index]
                    for (i = 0; i < arr.length; i++) {
                        this.courseAvgScoreArr.push(arr[i].courseAvgScore)
                    }
                }, 555)
                // console.log("this.courseAvgScoreArr:",this.courseAvgScoreArr)
            },

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {
                    myChart = echarts.init(document.getElementById('line1')),
                    color = [
                        '#0CD2E6',
                        '#3751E6',
                        '#18387f',
                        '#886EFF',
                        '#008DEC',
                        '#114C90',
                        '#00BFA5',
                        ];
                    
                    this.Array.length=0
                    for (i = 0; i < this.course_nameArr.length || i < this.courseAvgScoreArr.length; i++){
                        this.Array.push({
                            "name": this.course_nameArr[i],
                            "value": this.courseAvgScoreArr[i]
                        })
                        
                    }                 
                    // console.log("this.Array:",this.Array)

                   
                    // 设置数据
                    function setChartOption(data) {
                        const formatData = [];
                        data.forEach(function(item, index) {
                            formatData.push({
                                value: item.value,
                                name: item.name,
                                itemStyle: {
                                    normal: {
                                        borderWidth: 10,
                                        shadowBlur: 20,
                                        borderColor: color[index],
                                        shadowColor: color[index],
                                    },
                                },
                            }, {
                                value: 5,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: false,
                                        },
                                        labelLine: {
                                            show: false,
                                        },
                                        color: 'rgba(0, 0, 0, 0)',
                                        borderColor: 'rgba(0, 0, 0, 0)',
                                        borderWidth: 0,
                                    },
                                },
                            })
                        })
                
                        return formatData;
                    };
                
                    var option = {                    
                        color: color,
                        tooltip: {
                            show: true                          
                        },
                        series: [{
                            name: '',
                            type: 'pie',
                            radius: ['50%', '52%'],
                            hoverAnimation: false,
                            data: setChartOption(this.Array)
                        }, ]
                    }
                    
                    myChart.setOption(option);                             
                    
                    window.addEventListener("resize", function() {
                        myChart.resize();
                    });
                }, 600)
            }
            //=====echarts======

            

        },
        watch: {
            Index: {
                immediate: true,
                handler(newValue, oldValue) {
                    // console.log("Index被修改了", newValue, oldValue);
                    this.getcourse_name()
                    this.getCourseAvgScore()
                    this.drawEcharts()
                }
            }
           

        }

    })
})();